<template>
  <div class="content-Heartbeat">
    <div class="form-auth-key">
      <Form :model="formAuthKey" label-position="left" :label-width="100">
        <FormItem label="采集站编号">
          <Input v-model="formAuthKey.site_code"></Input>
        </FormItem>
        <FormItem label="CPU使用百分比">
          <Input v-model="formAuthKey.cpu_use"></Input>
        </FormItem>
        <FormItem label="磁盘使用百分比">
          <Input v-model="formAuthKey.disk_use"></Input>
        </FormItem>
        <FormItem label="内存使用百分比">
          <Input v-model="formAuthKey.memory_use"></Input>
        </FormItem>
        <FormItem label="采集站当前时间">
          <Input v-model="formAuthKey.time" placeholder="格式：2019-07-12 12:18:00"></Input>
        </FormItem>
        <FormItem label="认证码">
          <Input v-model="formAuthKey.auth_key"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleApiAuthKey()">发送</Button>
        </FormItem>
      </Form>
    </div>
    <div class="panel-auth-key-request-param">
      请求参数：
      <div><pre>{{ this.formAuthKey }}</pre></div>
    </div>
    <div class="panel-auth-key-response-param" v-show="rsShow">
      响应参数({{this.spendTime}} 秒)：
      <div><pre>{{ this.responseParam }}</pre></div>
    </div>
  </div>
</template>

<script>
import { apiHeartbeat } from '@/api/SiteApiTest'
export default {
  name: 'Heartbeat',
  data () {
    return {
      formAuthKey: {
        site_code: '',
        cpu_use: '',
        disk_use: '',
        memory_use: '',
        time: '',
        auth_key: ''
      },
      requestParam: '',
      responseParam: '',
      spendTime: 0,
      rsShow: false
    }
  },
  methods: {
    handleApiAuthKey () {
      this.requestParam = JSON.stringify(this.formAuthKey)
      apiHeartbeat(this.requestParam).then(res => {
        // const code = res.data.code
        if (code === 0) {
          this.spendTime = res.data.data.spendTime
          this.responseParam = JSON.parse(res.data.data.rs)
          this.rsShow = true
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    }
  }
}
</script>

<style lang="less">
@import "./Heartbeat";
</style>
